<template>
  <page-layout :noToolbar="true">
    <div slot="toolbar">
      <!--<el-button size="small" round type="primary" @click="newUser">新增人员</el-button>-->
    </div>
    <div class="card-header">人员管理</div>
    <!--<el-autocomplete-->
      <!--class="inline-input"-->
      <!--v-model="state2"-->
      <!--:fetch-suggestions="querySearch"-->
      <!--placeholder="请输入企业名称"-->
      <!--:trigger-on-focus="false"-->
      <!--@select="handleSelect"-->
    <!--&gt;</el-autocomplete>-->
    <el-card class="box-card">
      <el-card class="box-card">
        <el-form ref="searchRegisterCondition" :model="searchRegisterCondition" label-width="80px" inline>
          <el-form-item label="企业名称">
            <el-autocomplete
              v-model="state2"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="searchRegisterCondition.name" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchRegisterCondition.phone" />
          </el-form-item>
          <el-form-item label="用户类型">
            <el-select v-model="searchRegisterCondition.userType" placeholder="请选择">
              <el-option
                v-for="item in UserTypes"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refresh(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
          <el-card class="box-card">
            <el-table
              :data="userList.content" border stripe
              style="width: 100%">
              <el-table-column
                prop="id"
                label="编号"
                width="100">
              </el-table-column>
              <el-table-column prop="name" label="姓名">
              </el-table-column>
              <el-table-column prop="headimage" label="头像">
                <template slot-scope="scope">
                  <image-cover v-if="scope.row.headimage" :thumb.sync="scope.row.headimage" width="63px" height="63px" size-type="contain"></image-cover>
                  <span v-else>暂时无图</span>
                </template>
              </el-table-column>
              <el-table-column prop="sex" label="性别" ></el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号">
              </el-table-column>


              <el-table-column
                prop="userType"
                label="用户类型">
                <template slot-scope="scope">
                    <span>{{scope.row.userType|keyText('UserTypes')}}</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="depart.name"
                label="所属企业" v-if="adminInfo.userRole!=='COM'">
              </el-table-column>


              <el-table-column
                prop="yesterdayScore"
                label="昨日积分" >
              </el-table-column>

              <el-table-column
                prop="totalScore"
                label="累计积分">
              </el-table-column>

              <el-table-column
              prop="balanceScore"
              label="积分余额">
            </el-table-column>

              <el-table-column
                prop="status"
                label="状态">
                <template slot-scope="scope">
                  <span>{{scope.row.status|keyText('UserStatus')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" v-if="scope.row.status===1" @click="auditUser(scope.row,2)">通过</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.status===1" @click="auditUser(scope.row,3)">拒绝</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.state===0"  @click="switchUser(scope.row,0)">禁用</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.state===1"  @click="switchUser(scope.row,1)">启用</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.state===0"  @click="resetPwd(scope.row)">重置密码</el-button>
                  <el-button size="mini" type="text"   @click="editUser(scope.row,2)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="mt10">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="userList.totalElements"
                :page-size="userList.size"
                :current-page.sync="currentPage" @current-change="getPageChange">
              </el-pagination>
            </div>
          </el-card>
    </el-card>
    <el-dialog title="重置密码" :visible.sync="showResetPwd" width="500px">
      <el-form ref="form" :rules="passRules" :model="resetUserPasswordForm" label-width="80px" class="demo-form">
        <el-form-item label="密码" prop="password">
          <el-input v-model="resetUserPasswordForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPwdCommit('form')">重置</el-button>
          <el-button @click="resetPwdCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="showAdminEditor" title="查看 用户详情" width="50%">
      <user-editor @close="onAdminEditorClose" :is-close="showAdminEditor"></user-editor>
    </el-dialog>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import { mapGetters } from "vuex";
import ImageCover from "@/components/image-cover";
import Status from "@/libs/status";
import md5 from "js-md5";
import UserEditor from "./user-editor";
import _ from "lodash";
export default {
  created() {},
  mounted() {
    this.UserTypes = _.clone(Status.UserTypes);
    this.UserTypes.unshift({ value: "", text: "全部" });
    this.refresh();
  },
  data() {
    return {
      currentPage: 1,
      showAdminEditor: false,
      showResetPwd: false,
      selectedUser: {},
      resetUserPasswordForm: {
        password: ""
      },
      passRules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 8, max: 15, message: "长度在 8 到 15 个字符", trigger: "blur" }
        ]
      },
      UserTypes: [],
      departList: [],
      state2: "",
      timeout: null
    };
  },
  computed: {
    ...mapGetters({
      userList: "userList",
      adminInfo: "adminInfo",
      searchRegisterCondition: "searchRegisterCondition"
    })
  },
  methods: {
    querySearchAsync(queryString, cb) {
      var restaurants = this.departList;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      this.$store.dispatch("getDepartListS").then(ret => {
        var tem = ret.data.data;
        if (tem) {
          tem.map((item, index) => {
            this.departList.push({ value: item.name, id: item.id });
          });
        }
      });
    },
    handleSelect(item) {
      console.log(item);
      this.searchRegisterCondition.departId = item.id;
    },
    auditUser(row, status) {
      var tem = {};
      tem.usId = row.id;
      tem.status = status;
      this.$store.dispatch("checkUserS", tem).then(ret => {
        this.refresh();
      });
    },
    switchUser(row, state) {
      var para = {};
      para.userId = row.id;
      para.state = state;
      this.$store.dispatch("updateAuthUserStateS", para).then(ret => {
        this.refresh();
      });
    },
    newUser() {
      this.$store.commit("INIT_CURRENT_EXPERT");
      this.showAdminEditor = true;
    },
    editUser(row) {
      this.$store.dispatch("getTSUserByUserName", { username: row.username });
      this.showAdminEditor = true;
    },
    getPageChange(val) {
      if (this.adminInfo.userRole === "COM") {
        this.searchRegisterCondition.departId = this.adminInfo.uuId;
      }
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchRegisterCondition
      );
      this.$store.dispatch("getTSUserPageS", tem).then(ret => {});
    },
    refresh() {
      this.getPageChange(this.currentPage);
      this.loadAll();
    },
    resetPwd(user) {
      this.showResetPwd = true;
      this.selectedUser = user;
      this.resetUserPasswordForm.password = "";
    },
    resetPwdCommit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const payload = {
            userId: this.selectedUser.id,
            password: md5(this.resetUserPasswordForm.password)
          };

          this.$store.dispatch("resetAdminPassowrd", payload).then(ret => {
            this.$notify({
              title: "操作成功",
              type: "success"
            });
            this.showResetPwd = false;
          });
        } else {
          return false;
        }
      });
    },
    resetPwdCancel() {
      this.showResetPwd = false;
    },
    onAdminEditorClose() {
      this.showAdminEditor = false;
      this.refresh();
    }
  },
  components: {
    PageLayout,
    UserEditor,
    ImageCover
  }
};
</script>
<style>
</style>
